<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	   *{padding: 0;margin: 0;border: 0;}
       li{list-style:none;line-height: 35px;}
	   #box{width:500px;margin: 0 auto;overflow: hidden;border: 5px solid red;}
	   .shoufengqin{border: 1px solid blue;padding:10px 20px;display: none;}
	</style>
	<script src='jquery-1.7.2.min.js'></script>
	<script>
		$(document).ready(function(){
			$('.more_span').click(function(){
				//获得span的值(查看详情+)
				var a=$(this).html();
				//alert(a);
				if (a == '查看详情+') {
					$(this).html("查看详情-");
					$(this).siblings('.shoufengqin').show();
				};

				if (a == '查看详情-') {
					$(this).html("查看详情+");
					$(this).siblings('.shoufengqin').hide();
				};	
			})
		});
	</script>
</head>
<body>
	<div id='box'>
		<ul>
			<li style="background:green;">
				<span style='display:inline-block;width:100px;'>id</span>
				<span style='display:inline-block;width:100px;'>名称</span>
				<span style='display:inline-block;width:100px;'>操作</span>
			</li>
			<li>
				<span style='display:inline-block;width:100px;'>1</span>
				<span style='display:inline-block;width:100px;'>新品推广</span>
				<span class='more_span' style='display:inline-block;width:100px;cursor:pointer;'>查看详情+</span>
				<div class='shoufengqin'>
					111111111111111
				</div>
			</li>
			<li>
				<span style='display:inline-block;width:100px;'>1</span>
				<span style='display:inline-block;width:100px;'>新品推广</span>
				<span class='more_span' style='display:inline-block;width:100px;cursor:pointer;'>查看详情+</span>
				<div class='shoufengqin'>
					111111111111111
				</div>
			</li>
		</ul>
	</div>
</body>
</html>